<template>
  <div>
    <!--

 :on-preview="preview"
      :on-remove="handleRemove"
      :on-change="changeFile"
      :before-upload="beforeUpload"
       :http-request="upload"
       :class="{ disabled: fileComputed }"

     -->
    <el-upload
      list-type="picture-card"
      :limit="1"
      action="#"
      :on-preview="preview"
      :on-remove="handleRemove"
      :on-change="changeFile"
      :before-upload="beforeUpload"
      :http-request="upload"
      :file-list="fileList"
      :class="{ disabled: disabledFlag ? true : false }"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 显示的是进度条 -->
    <el-progress
      v-if="processFlag"
      :text-inside="true"
      color="#ff0000"
      :stroke-width="20"
      :percentage="percentage"
      status="exception"
    />

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <img
        :src="staffPhoto"
        alt=""
        style="width:200px;height:200px;border-radius:50%"
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
export default {
  props: ['staffPhoto'],
  data() {
    return {
      fileList: [],
      files: null,
      uid: null,
      imgSrc: '',
      dialogVisible: false,
      percentage: 0,
      processFlag: false
    }
  },
  computed: {
    disabledFlag() {
      return this.fileList.length
    }
  },
  watch: {
    staffPhoto: {
      handler(newVal) {
        if (newVal) {
          this.fileList = [{ url: newVal }]
        }
      },
      immediate: true
    }
  },
  methods: {
    preview() {
      this.dialogVisible = true
    },
    handleRemove() {
      this.fileList = []
    },
    changeFile(file, fileList) {
      //  模拟
      //  this.fileList = [{ url: this.staffPhoto }]
      this.fileList = fileList.map(item => item)
      /*
      1-获取图片资源
      2-显示图片

      */
      console.log(file, fileList, 3333)
    },
    beforeUpload(file) {
      console.log(file, 55555)
      // 实现上传之前需要做的
      /*
      1-判断图片上传的格式
      2-判断图片大小
      */
      if (file.size > 400000) {
        this.$message.error('图片超出尺寸了')
        return false
      }
      var imgType = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']
      // if(imgType.includes(file.type)){}
      if (!imgType.some(item => item === file.type)) {
        this.$message.error('图片格式不对')
        return false
      }

      this.uid = file.uid //  记录上传满足得图片
      return true
    },
    upload(params) {
      this.processFlag = true //  开启进度条
      console.log(params, 112233)
      var cos = new COS({
        SecretId: 'AKIDPdbMr63pKYVCcldEZcOt86nDNGsDH5bq',
        SecretKey: 'ziALErDI6dtsZz80bvzmIXVCcld06vTk'
      })
      cos.putObject(
        {
          Bucket: 'hrr-1302684573' /* 必须   存储桶名称*/,
          Region: 'ap-chongqing' /* 存储桶所在地域，必须字段 */,
          Key: params.file.name /* 必须 */,
          StorageClass: params,
          Body: params.file, // 上传文件对象
          onProgress: progressData => {
            this.percentage = progressData.percent * 100
          }
        },
        (err, data) => {
          console.log(err || data, 89)
          if (data && data.statusCode === 200) {
            this.imgSrc = 'https://' + data.Location
            this.fileList = this.fileList.map(item => {
              if (item.uid === this.uid) {
                return { url: 'https://' + data.Location }
              }
              return item
            })
            /* 将图片存到本地服务器中 */
            setTimeout(() => {
              this.$emit('upImg', this.imgSrc)
             
              this.processFlag = false
            }, 3000)
          }
        }
      )
    }
  }
}
</script>

<style>
.disabled .el-upload--picture-card {
  display: none;
}
</style>
